<!DOCTYPE html>
<html>
<<template "_head.html">>

<el-main style="background-color: #F5F5F5;">
    <el-row :gutter="20" style="margin-bottom: 8px;">
        <el-col :span="24"><div class="grid-content host_table" style="height: 80%;">
                <el-link href="/host" style="font-size: 18px;margin-bottom: 12px;"> > 服务器列表</el-link> <el-link type="primary" href="#" style="font-size: 18px;margin-bottom: 12px;"> > <<.data.Name>></el-link>

                <template>
                  <el-tabs type="card" v-model="activeName" @tab-click="handleClick">

                    <el-tab-pane label="概括" name="a1" style="height: 80%" >

                        <el-row :gutter="12">
                            <el-col :span="6">
                                <el-card shadow="hover" style="height: 210px;">
                                  <span><b>系统</b></span><hr>
                                  <span><<.data.SysType>></span><br>
                                  <span><<.data.OsName>></span><br>
                                </el-card>
                              </el-col>
                              <el-col :span="6">
                                <el-card shadow="hover" style="height: 210px;">
                                  <span><b>配置</b></span><hr>
                                  <span>cpu: <<.data.CpuName>>(<<.data.CpuCoreNumber>>)</span><br>
                                  <span>cpu id: <<.data.CpuID>></span><br>
                                  <span>内存: <<.data.MemTotal>></span><br>
                                  <span>磁盘: <<.data.DiskTotal>></span><br>
                                </el-card>
                              </el-col>
                              <el-col :span="6">
                                <el-card shadow="hover" style="height: 210px;">
                                  <span><b>架构</b></span><hr>
                                  <span><<.data.SysArchitecture>></span><br>
                                </el-card>
                              </el-col>
                              <el-col :span="6">
                                <el-card shadow="hover" style="height: 210px;">
                                  <span><b>提示</b></span><hr>
                                  <span style="color: red;"><<.tip>></span><br>
                                  
                                </el-card>
                              </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="8" style="padding: 24px;">
                                <el-card shadow="hover" style="height: 280px;">
                                  <div id="ecs1" style="width: 100%;height:240px;"></div>
                                </el-card>
                            </el-col>

                            <el-col :span="8" style="padding: 24px;">
                                <el-card shadow="hover" style="height: 280px;">
                                  <div id="ecs2" style="width: 100%;height:240px;"></div>
                                </el-card>
                            </el-col>

                            <el-col :span="8" style="padding: 24px;">
                                <el-card shadow="hover" style="height: 280px;">
                                  <div id="ecs3" style="width: 100%;height:240px;"></div>
                                </el-card>
                            </el-col>

                        </el-row>
                        <el-row :gutter="12">
                            
                              <el-col :span="12" style="padding: 24px;">
                                <el-card shadow="hover" style="height: 340px;">
                                  <div id="ecs4" style="width: 100%;height:300px;"></div>
                                </el-card>
                              </el-col>

                              <el-col :span="12" style="padding: 24px;">
                                <el-card shadow="hover" style="height: 340px;">
                                  <div id="ecs5" style="width: 100%;height:300px;"></div>
                                </el-card>
                              </el-col>
                        </el-row>

                    </el-tab-pane>

                    <el-tab-pane label="监控" name="a2">
                            <br>
                            <h4> > CPU 监控</h4>
                            <span style="margin-left: 12px;margin-right: 24px;">报警值: 90% </span>  <el-button round>修改</el-button>
                            <hr>
                            <br>
                            <h4> > 内存 监控</h4>
                            <span style="margin-left: 12px;margin-right: 24px;">报警值: 90% </span>  <el-button round>修改</el-button>
                            <hr>
                            <br>
                            <h4> > 磁盘容量 监控</h4>
                            <span style="margin-left: 12px;margin-right: 24px;">报警值: 90% </span>  <el-button round>修改</el-button>
                            <hr>
                            <br>
                            <h4> > 连接数 监控</h4>
                            <span style="margin-left: 12px;margin-right: 24px;">报警值: 1000 个连接 </span>  <el-button round>修改</el-button>
                            <hr>
                            <br>
                            <h4> > 进程数 监控</h4>
                            <span style="margin-left: 12px;margin-right: 24px;">报警值: 1000 个进程 </span>  <el-button round>修改</el-button>
                            <hr>
                    </el-tab-pane>

                    <el-tab-pane label="进程" name="a3">进程</el-tab-pane>

                    <el-tab-pane label="环境变量" name="a4">环境变量</el-tab-pane>

                    <el-tab-pane label="部署" name="a5">部署</el-tab-pane>

                    <el-tab-pane label="设置" name="a6">设置</el-tab-pane>

                  </el-tabs>
                </template>


            </div>
        </el-col>
    </el-row>

</el-main>
</el-container>

</div>

</body>

<<template "_echarts.html">>

<script type="text/javascript">
    let url = "/host";
    new Vue({
        el: "#app",
        data: function () {
            return {
                menu: Enum(url),
                activeName: 'a1'
            }
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
                window.location.href=keyPath;
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            getData(){
                let url = "/api/slve/v1/echart/base/5a5f124b094be77c221535fef0963a63";
                console.log(url);
                axios.get(url).then(response=> { 
                    console.log(response) 
                }) .catch(error=> { 
                    console.log(error)
                });
            }
        },
        created: function(){
            // let t = this;
            // t.getData();
        },
        mounted:{

        
        }
    });


// $.ajax({
//    type:'get',
//    url:'/api/slve/v1/echart/base/b7b82284d142977884440750f0978470',
//     dataType:'json',
//     contentType: "application/json",
//     async:false,
//     success:function (json){
//        console.log(json);
//     },
//    error:function (){
//       //弹错误框
//       console.log("请求失败");
//     }
// });


let Chart1 = echarts.init(document.getElementById('ecs1'));
let Chart2 = echarts.init(document.getElementById('ecs2'));
let Chart3 = echarts.init(document.getElementById('ecs3'));
let Chart4 = echarts.init(document.getElementById('ecs4'));
let Chart5 = echarts.init(document.getElementById('ecs5'));

setInterval(function () {
console.log("更新图表")

let echart_data_url = "/api/slve/v1/echart/base/5a5f124b094be77c221535fef0963a63";
console.log(echart_data_url);
axios.get(echart_data_url).then(response=> { 
    console.log(response) 

    let showTime = response.data.showTime;

    //ecs1 
   
    let timeData1 = showTime;
    let showData1 = response.data.cpuShowData;
    let option1 = LineChartData3("CPU使用率",["总使用率"],timeData1,showData1)
    Chart1.setOption(option1);

    //ecs2
    
    let timeData2 = showTime;
    let showData2 = response.data.memShowData;
    let option2 = LineChartData3("内存使用率",["内存使用率"],timeData2,showData2)
    Chart2.setOption(option2);

    //ecs3
    
    let timeData3=showTime;
    let showData3=['1200', '1400', '1008', '1411', '1026', '1288', '1300', '800', '1100', '1000', '1118', '1322'];
    let option3 = LineChartData3("磁盘使用率",["总使用率"],timeData3,showData3)
    Chart3.setOption(option3);

    //ecs4
    
    let titleStr4="网络IO - 输出";
    let objNameList4=[];
    let timeData4=showTime;
    let objDatas = [];
    for (k in response.data.rxShowData){
        objNameList4.push(k)
        objDatas.push({
            name: k,
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: response.data.rxShowData[k],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(199, 237, 250,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(199, 237, 250,0.2)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#f7b851'
                }
            },
            lineStyle: {
                normal: {
                    width: 3
                }
            }
        })
        }
        let option4 = LineChartData4(titleStr4,objNameList4,timeData4,objDatas)    
        Chart4.setOption(option4);

        //ecs5
        
        let titleStr5="网络IO - 输入";
        let objNameList5=[];
        let timeData5=showTime;
        let objDatas5 = [];
        for (k in response.data.txShowData){
            objNameList5.push(k)
            objDatas5.push({
                name: k,
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 6,
                data: response.data.txShowData[k],
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(199, 237, 250,0.5)'
                        }, {
                            offset: 1,
                            color: 'rgba(199, 237, 250,0.2)'
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f7b851'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 3
                    }
                }
            })

    }
    let option5 = LineChartData4(titleStr5,objNameList5,timeData5,objDatas5)    
    Chart5.setOption(option5);

}) .catch(error=> { 
    console.log(error)
});


}, 10000)


// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// setInterval(function () {
//     console.log("time_list_data = ",time_list_data)
//     addData();
//     myChart.setOption({
//       xAxis: {
//           data: time_list_data
//         },
//       series: [{
//           name:'Used Memory',
//           data: used_memory_data
//         },{
//           name:'Used Memory Rss',
//           data: used_memory_rss_data
//         },
//         {
//           name:'Used Memory Lua',
//           data: used_memory_lua_data
//         },
//         {
//           name:'Used Memory Peak',
//           data: used_memory_peak_data
//         }
//         ]});
// }, 10000);
    

</script>

</html>